<template>
    <!--一级导航 文字导航 -->
    <Tabs v-model:active="active" class="homepage-fixed" @click-tab="toModule" @change="changeTab">
        <Tab v-for="item, index in firstCategoeyList" :title="item.moduleName" :key="item.moduleKey" :name="item.moduleKey"
            data-id="index">
        </Tab>
    </Tabs>
    <Swipe class="my-swipe" :autoplay="2000" loop v-if="bannerList?.length">
        <SwipeItem class="my-swipeItem" v-for="item in bannerList">
            <img :src="item.adFocusPictureDetail.cover" />
        </SwipeItem>
    </Swipe>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'FirstCategory'
})

function beforeUnmount() {
    throw new Error("Function not implemented.");
}
</script>
<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router"
import { Tab, Tabs, Swipe, SwipeItem } from 'vant';
import { onMounted, ref, watch } from 'vue';
import { getFirstCategoeyListApi } from "@/api/headerNav/headerNav"
import { firstCategoryListModel } from '@/api/headerNav/model/headerNavModel';
// 引入
import { focusImageModel } from '@/api/recommend/model/recommendModel';
import { getRecommendBannerApi } from '@/api/recommend/recommend';
// 创建路由实例
const route = useRoute()

// 轮播图列表
const bannerList = ref<any>()

// 获取轮播图列表
const getRecommendBanner = async () => {
    let result
    // 当路由的params参数为空时，实际一级、二级 渲染的是  params为tuijian的数据
    if (route.params.moduleKey) {
        result = await getRecommendBannerApi(route.params.moduleKey as string)
        active.value = route.params.moduleKey as string

    } else {
        active.value = 'tuijian'
        result = await getRecommendBannerApi('tuijian')
    }
    bannerList.value = result.moduleContent.focusImages
}

// 获取router实例
const router = useRouter()


let active = ref<string>('tuijian')

// 一级分类导航 列表
const firstCategoeyList = ref<firstCategoryListModel>([])

// 获取一级分类导航列表
const getFirstCategoeyList = async () => {
    const res = await getFirstCategoeyListApi()
    // firstCategoeyList.value = res.data.data
    firstCategoeyList.value = res
    console.log(res, '一级分类导航列表');

}

interface tabMessage {
    name: string
}

/* 
点击去响应的模块
Tabs Events   click-tab	点击标签时触发的事件，默认传递过来一个对象，对象里面name对应着Tab里面的name
 */
const toModule = (obj: tabMessage) => {
    console.log(obj, 'obj');
    // router.push({
    //     name: "Voicebook",
    //     params: {
    //         moduleKey: obj.name
    //     }
    // })

    if (obj.name !== 'tuijian') {
        router.push({
            name: "Voicebook",
            params: {
                moduleKey: obj.name
            }
        })
    } else {
        router.push({
            path: "/"
        })
    }

}


const changeTab = (obj: any) => {
    console.log(obj, 'obj');

}
// 监听动态路由的改变，每次params参数改变都重新请求
watch(() => route, () => {
    getRecommendBanner()
})

onMounted(() => {
    getFirstCategoeyList()
    getRecommendBanner()
})

</script>

<style lang="scss" scoped>
// 一级导航  文字导航
.homepage-fixed {
    border-bottom: 0.5px solid #e8e8e8;
}

.my-swipe {
    width: 100vw;
    height: 150px;
    // display: flex;
    // justify-content: center;
    // align-items: center;

    .my-swipeItem {
        width: 300px;
        height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            width: 300px;
            height: 150px;
            border-radius: 10px;
        }
    }
}
</style>